<template>
  <!-- 添加计划 -->
  <div>
    <a-drawer
      placement="right"
      :closable="false"
      :visible="addVisible"
      height="100%"
      width="75%"
      wrapClassName="add-power"
      @close="closeTopDrawer"
      :destroyOnClose="true"
      :headerStyle="{
        background: '#fff',
        padding: '0.2rem 0.25rem 0 0.25rem',
        flexGrow: 0,
      }"
      :bodyStyle="{
        padding: '0.2rem',
        background: 'fff',
        flexGrow: 1,
        overflowY: 'auto',
      }"
      :drawerStyle="{
        background: '#EEEEEF',
        display: 'flex',
        flexDirection: 'column',
      }"
    >
      <template #title>
        <div class="head-box">
          <div class="name-box">
            <span>{{ planName }}</span>
            <div class="operation-right">
              <a-icon
                type="edit"
                title="编辑"
                class="mr_16"
                @click="editPlan"
              />
              <a-icon
                type="delete"
                title="删除"
                class="mr_16"
                @click="deletePlan"
              />
              <a-icon
                type="sync"
                title="刷新"
                class="mr_16"
                @click="getPlanDetail"
              />
              <div class="close-box" @click="closeTopDrawer">
                <a-icon type="close" class="close-icon" />
              </div>
            </div>
          </div>
          <div class="status-box">
            <div class="detail-one" v-for="item in planDetail">
              <div class="detail-title">{{ item.label }}</div>
              <div class="detail-msg">{{ item.value }}</div>
            </div>
          </div>
        </div>
        <div class="drawer-tab-box">
          <div class="all-tabs">
            <span class="drawer-tab active-drawer-tab">工单生成记录</span>
          </div>
        </div>
      </template>
      <div class="content-box">
        <div class="task-one" v-for="task in takList" @click="openOrder(task)">
          <div class="task-box">
            <div class="left-task">
              <div class="plan-title">{{ task.title }}</div>
              <div>编号 {{ task.id }}</div>
            </div>
          </div>
          <div class="task-time">生成日期&nbsp; {{ task.createTime }}</div>
        </div>
      </div>
    </a-drawer>

    <!-- 工单记录详情 -->
    <a-drawer
      placement="right"
      :closable="false"
      :visible="orderVisible"
      height="100%"
      width="75%"
      wrapClassName="add-power"
      @close="closeOrder"
      :destroyOnClose="true"
      :headerStyle="{
        background: '#fff',
        padding: '0.2rem 0.25rem',
        flexGrow: 0,
      }"
      :bodyStyle="{
        padding: '0.2rem',
        background: 'fff',
        flexGrow: 1,
        overflowY: 'auto',
      }"
      :drawerStyle="{
        background: '#EEEEEF',
        display: 'flex',
        flexDirection: 'column',
      }"
    >
      <template #title>
        <div class="head-box">
          <div class="name-box">
            <div class="task-code">
              编号{{ workOrderMsg.id }} · {{ planData.taskTemplateName }}
            </div>
            <div class="operation-right">
              <a-icon type="edit" title="编辑" class="mr_16" />
              <a-icon type="delete" title="删除" class="mr_16" />
              <a-icon
                type="sync"
                title="刷新"
                class="mr_16"
                @click="getPlanDetail"
              />
              <div class="close-box" @click="closeOrder">
                <a-icon type="close" class="close-icon" />
              </div>
            </div>
          </div>
          <div class="title-box">
            <div>{{ workOrderMsg.title }}</div>
            <div class="tag-box">较低</div>
          </div>
          <div class="order-status">
            <div class="order-icon refuse-color">
              <a-icon type="exclamation" />
            </div>
            <div class="refuse-txt">拒绝接受</div>
          </div>
          <div class="row-line"></div>
          <div class="order-top-msg">
            <div class="order-one">
              <span></span>
              <span class="top-title"></span>
            </div>
          </div>
        </div>
      </template>
      <div class="inspection-box">
        <div class="inspection-left">
          <div class="station-txt">电站</div>
          <span class="station-tit">{{ taskOrderData.stationName }}</span>
          <div class="row-line"></div>
          <div class="station-txt">描述</div>
          <div class="desc-txt">{{ taskOrderData.taskDesc }}</div>
          <div class="station-txt">图片描述</div>
          <div class="desc-txt"></div>
        </div>
        <div class="inspection-right">
          <!-- <div class="flow-box no-after">
            <div>
              <div class="order-step">发起工单</div>
              <div class="usermsg-box">
                <div class="avatar-box">
                  <img src="../../../assets/workOrder.svg" alt="" class="ava" />
                </div>
                <div class="user-name">评价人姓名</div>
              </div>
            </div>
            <div class="step-time">2023/07/22 10:20:45</div>
          </div> -->
          <div class="flex-sub1 scroll-y bgfff pd-20 flow">
            <ul>
              <li>
                <div class="flow-status-icon">
                    <a-icon class="green" type="check-circle" theme="filled" />
                  </div>
                <div class="flex-alignc-justifyb mb-16">
                  <div class="flow-title">发起工单</div>
                  <div>{{ taskOrderData.createTime }}</div>
                </div>
                <div>
                  <div class="header">
                    <!-- <img :src="taskOrderData.createUserIcon?taskOrderData.createUserIcon:'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'" /> -->
                    <img
                      :src="
                        taskOrderData.createUserIcon
                          ? taskOrderData.createUserIcon
                          : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
                      "
                    />
                  </div>
                  <div>{{ taskOrderData.createName }}</div>
                </div>
              </li>
              <li>
                <div class="flow-status-icon">
                    <a-icon v-if="taskOrderData.taskStatus == 1" class="warn" type="clock-circle" theme="filled" />
                    <a-icon v-else-if="taskOrderData.taskStatus == 2" class="error" type="exclamation-circle" theme="filled" />
                    <a-icon v-else-if="taskOrderData.taskStatus == 3" class="green" type="check-circle" theme="filled" />
                    <a-icon v-else type="clock-circle" theme="filled" />
                  </div>
                <div class="flex-alignc-justifyb mb-16">
                  <div class="flow-title">
                    <span>处理工单</span>
                    <span v-if="taskOrderData.taskStatus == 2" class="ml-10 cf8b">(已拒绝)</span>
                  </div>
                  <div v-if="taskOrderData.taskStatus == 2">
                    {{ getFlowTime(2,'createTime') }}
                  </div>
                  <div v-else>{{ getFlowTime(1,'createTime') }}</div>
                </div>
                <div>
                  <div class="header">
                    <!-- <img :src="taskOrderData.handleIcon?taskOrderData.handleIcon:'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'" /> -->
                    <img
                      :src="
                        getFlowTime(3,'headImgUrl')
                          ? getFlowTime(3,'headImgUrl')
                          : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
                      "
                    />
                  </div>
                  <!-- <div>{{ taskOrderData.handleName }}</div> -->
                  <div>{{ getFlowTime(3,'userName') }}</div>
                </div>
              </li>
              <li>
                <div class="flow-status-icon">
                    <a-icon v-if="getFlowStatus(4)" class="green" type="check-circle" theme="filled" />
                    <a-icon v-else-if="getFlowStatus(5)" class="error" type="exclamation-circle" theme="filled" />
                    <a-icon v-else type="clock-circle" theme="filled" />
                  </div>
                <div class="flex-alignc-justifyb mb-16">
                  <div class="flow-title">
                    <span>验证工单</span>
                    <span v-if="taskOrderData.taskStatus == 5" class="ml-10 cf8b">(已拒绝)</span>
                  </div>
                  <div v-if="taskOrderData.taskStatus == 5">
                    {{ getFlowTime(5,'createTime') }}
                  </div>
                  <div v-else>{{ getFlowTime(4,'createTime') }}</div>
                </div>
                <div>
                  <div class="header">
                    <!-- <img :src="taskOrderData.createUserIcon?taskOrderData.createUserIcon:'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'" /> -->
                    <img
                      :src="
                        getFlowTime(4,'headImgUrl')
                          ? getFlowTime(4,'headImgUrl')
                          : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
                      "
                    />
                  </div>
                  <!-- <div>{{ taskOrderData.createName }}</div> -->
                  <div>{{ getFlowTime(4,'userName') }}</div>
                </div>
              </li>
              <li>
                <div class="flow-status-icon">
                    <a-icon v-if="getFlowStatus(6)" class="green" type="check-circle" theme="filled" />
                    <a-icon v-else type="clock-circle" theme="filled" />
                  </div>
                <div class="flex-alignc-justifyb mb-16">
                  <div class="flow-title">评价工单</div>
                  <div>{{ getFlowTime(6,'createTime') }}</div>
                </div>
                <div>
                  <div class="header">
                    <!-- <img :src="taskOrderData.verifyIcon?taskOrderData.verifyIcon:'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'" /> -->
                    <img
                      :src="
                        getFlowTime(6,'headImgUrl')
                          ? getFlowTime(6,'headImgUrl')
                          : 'https://img1.igen-tech.com/default/e521bd28ac8c43d69b51bc97e0a284721688955095457.png'
                      "
                    />
                  </div>
                  <!-- <div>{{ taskOrderData.verifyName }}</div> -->
                  <div>{{ getFlowTime(6,'userName') }}</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import { planDetail } from "@/api/plan.js";
import { getTaskDetail } from "@/api/workOrder.js";
export default {
  data() {
    return {
      planDetail: [
        {
          value: "--",
          label: "工单模板:",
          prop: "taskTemplateName",
        },
        {
          value: "--",
          label: "计划首次处理时间: ",
          prop: "planHandlerStartTime",
        },
        {
          value: "--",
          label: "重复方式:",
          prop: "repeatTypeName",
        },
        {
          value: "--",
          label: "重复次数:",
          prop: "repeatCount",
        },
        {
          value: "--",
          label: "已生成:",
          prop: "createCount",
        },
        {
          value: "--",
          label: "下次生成时间:",
        },
        {
          value: "--",
          label: "生成工单时间:",
          prop: "createTime",
        },
        {
          value: "--",
          label: "最后更新:",
        },
        {
          value: "--",
          label: "最后更新人:",
        },
      ],
      planName: "",
      frequencyList: [
        { label: "每天", value: "1" },
        { label: "每周日", value: "2" },
        { label: "每月", value: "3" },
      ],
      takList: [],
      planData: {},
      // 工单记录详情
      orderVisible: false,
      workOrderMsg: {},
      orderDetail: [
        {
          value: "--",
          label: "计划处理时间:",
          prop: "taskTemplateName",
        },
        {
          value: "--",
          label: "计划时间:",
          prop: "taskTemplateName",
        },
        {},
        {
          value: "--",
          label: "实际处理时间:",
          prop: "taskTemplateName",
        },
        {
          value: "--",
          label: "实际用时:",
          prop: "taskTemplateName",
        },
        {
          value: "--",
          label: "偏差:",
          prop: "taskTemplateName",
        },
      ],

      //巡检数据
      taskOrderData: {},
    };
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    addVisible: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // 处理获取流程操作时间
    getFlowTime(status,field) {
      if (this.taskOrderData.taskFlowEntities) {
        let index = this.taskOrderData.taskFlowEntities.findIndex((item) => {
          if(item) {
            item.flowStatus == status;
          }
        });
        if (index != -1) {
          return this.taskOrderData.taskFlowEntities[index][field];
        }else{
          return ''
        }
      }else {
        return ''
      }
    },
     // 处理获取流程操作状态
     getFlowStatus(status) {
      if (this.taskOrderData.taskFlowEntities) {
        let someStatus = this.taskOrderData.taskFlowEntities.some(item => { 
          if(item) {
            return item.flowStatus == status
          }
         })
        return someStatus
      }else {
        return false
      }
    },
    closeTopDrawer() {
      this.$emit("update:addVisible", false);
    },
    getPlanDetail() {
      planDetail({ id: this.id }).then((res) => {
        this.planName = res.data.planName;

        // item.repeatTypeName =
        let findValue = this.frequencyList.find((f) => {
          return f.value == res.data.repeatType;
        });
        if (findValue) {
          res.data.repeatTypeName = findValue.label;
        }
        res.data.createCount = res.data.taskEntities.length;
        this.planData = res.data;
        this.planDetail.forEach((item) => {
          for (let k in res.data) {
            if (item.prop == k) {
              item.value = res.data[k];
            }
          }
        });
        this.takList = res.data.taskEntities;
      });
    },

    // 工单记录详情
    openOrder(task) {
      this.workOrderMsg = task;
      this.orderVisible = true;
      this.getWorkOrder();
    },
    closeOrder() {
      this.orderVisible = false;
    },

    // 获取工单详情
    getWorkOrder() {
      getTaskDetail({ id: this.workOrderMsg.id }).then((res) => {
        console.log(res);
        this.taskOrderData = res.data;
      });
    },

    // 编辑
    editPlan() {
      this.$emit("detailEdit", this.planData);
    },

    // 删除
    deletePlan() {
      this.$emit("detailDelete", this.planData);
    },
  },
  watch: {
    addVisible(newv) {
      if (newv) {
        this.getPlanDetail();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.add-power {
  .head-box {
    .name-box {
      display: flex;
      justify-content: space-between;
      .task-code {
        color: #95929c;
        font-size: 12px;
      }
      span {
        font-size: 18px;
        color: #252b3a;
      }
      .operation-right {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.45);
        .mr_16 {
          margin-right: 16px;
          transition: all 0.5s;
          cursor: pointer;
          &:hover {
            color: #048fff;
          }
        }
        .close-box {
          background: #ff7875;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 28px;
          height: 28px;
          font-size: 16px;
          color: #fff;
          border-radius: 50%;
          &:hover {
            i {
              transform: rotate(90deg);
            }
          }
          i {
            transition: all 0.3s;
          }
        }
      }
    }
    .title-box {
      display: flex;
      font-size: 18px;
      color: #252b3a;
      margin-top: 8px;
      align-items: center;
      .tag-box {
        margin-left: 12px;
        padding: 4px 8px;
        font-size: 12px;
        color: #41d068;
        background-color: #41d0681a;
        border-radius: 2px;
      }
    }
    .order-status {
      margin-top: 8px;
      display: flex;
      align-items: center;
      font-size: 12px;
      .order-icon {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #fff;
      }
      .refuse-color {
        background: #ffb450;
      }
      .refuse-txt {
        color: #ffb450;
      }
    }
    .row-line {
      width: 100%;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      margin: 20px 0;
    }
    .order-top-msg {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-gap: 16px;
      .order-one {
        font-size: 12px;
        color: #00000073;
        .top-title {
          color: #515561;
        }
      }
    }
    .status-box {
      display: grid;

      margin-top: 16px;
      grid-template-columns: 1fr 1fr 1fr;
      //   grid-template-rows: 40px 40px 40px;
      grid-gap: 16px;
      .detail-one {
        font-size: 12px;
        .detail-title {
          color: #00000073;
          line-height: normal;
        }
        .detail-msg {
          color: #000000a6;
          margin-top: 4px;
          line-height: normal;
        }
      }
    }
  }
  .drawer-tab-box {
    padding: 0 8px;
    margin-top: 16px;
    .all-tabs {
      display: flex;
      span {
        padding: 12px 0 8px;
        margin-right: 24px;
        font-size: 12px;
        color: #00000073;
        cursor: pointer;
      }
      .active-drawer-tab {
        color: #048fff;
        border-bottom: 2px solid #048fff;
        font-weight: 700;
      }
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    .task-one {
      padding-bottom: 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      font-size: 12px;
      cursor: pointer;
      color: #00000073;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .task-box {
        font-size: 12px;

        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-task {
          font-size: 12px;
          .plan-title {
            color: #000000a6;
          }
        }
      }
      .task-time {
        padding-right: 8px;
      }
    }
  }

  // 巡检内容
  .inspection-box {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 16px;
    height: 100%;

    .inspection-left {
      height: 100%;
      overflow-y: auto;
      background: #fff;
      padding: 16px;
      box-sizing: border-box;
      .station-txt {
        font-size: 16px;
        color: #252b3a;
        margin-bottom: 8px;
      }
      .station-tit {
        font-size: 12px;
        cursor: pointer;
        color: #515561;
        text-decoration: underline;
      }
      .desc-txt {
        color: #515561;
        font-size: 12px;
        margin-bottom: 24px;
      }
      .row-line {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin: 20px 0;
      }
    }
    .inspection-right {
      height: 100%;
      overflow-y: auto;
      background: #fff;
      padding: 16px;
      box-sizing: border-box;
      .flow-box {
        display: flex;
        justify-content: space-between;
        padding: 0 24px;
        box-sizing: border-box;
        position: relative;
        .order-step {
          font-size: 16px;
          color: #515561;
        }
        .usermsg-box {
          padding: 12px 12px 0 16px;
          .avatar-box {
            width: 32px;
            height: 32px;
            position: relative;
            .ava {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
            }
          }
          .user-name {
            font-size: 12px;
            margin-top: 6px;
            line-height: normal;
          }
        }

        // overflow: hidden;
        &::before {
          background: #b3b3b3;
          width: 8px;
          height: 8px;
          content: "";
          display: block;
          position: absolute;
          border-radius: 50%;
          left: 8px;
          top: 20px;
        }
        &::after {
          background: rgba(0, 0, 0, 0.08);
          width: 1px;
          height: 100%;
          content: "";
          display: block;
          position: absolute;
          border-radius: 1px;
          left: 12px;
          top: 24px;
        }
        .step-time {
          font-size: 12px;
          color: #95929c;
        }
      }
      .no-after {
        &::after {
          display: none;
        }
      }
      .flow {
        padding-left: 10px;
        // border-left: 1px solid rgba(0, 0, 0, 0.08);

        li {
          position: relative;
          padding: 0 40px 60px 40px;
          .flow-status-icon {
            position: absolute;
            top: -5px;
            left: -2px;
            .green {
              color: #41D068;
            }
            .warn {
              color: #f8b51e;
            }
            .error {
              color: #FF7875;
            }
          }
          &:before {
            position: absolute;
            display: block;
            content: "";
            top: 3px;
            left: 3px;
            width: 10px;
            height: 10px;
            // background-color: hsla(0, 0%, 50.2%, 0.6);
            border-radius: 50%;
          }

          &:after {
            position: absolute;
            display: block;
            content: "";
            top: 8px;
            bottom: -3px;
            left: 7px;
            width: 1px;
            background-color: rgba(0, 0, 0, 0.08);
            border-radius: 1px;
          }

          &:last-child {
            &:after {
              display: none;
            }
          }
          .add-member {
            position: absolute;
            top: 0;
            right: 0;
          }
          .tip {
            font-size: 12px;
            color: rgba(0, 0, 0, 0.45);
          }
          .flow-title {
            line-height: 1;
          }
          .header {
            position: relative;
            margin-bottom: 10px;

            img {
              width: 80px;
              height: 80px;
              border-radius: 50%;
            }

            .close {
              position: absolute;
              top: -20%;
              right: -20%;
            }
          }
        }
      }
    }
  }
}
</style>